<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
</head>
<body>
    <div id="user_toolbar" class="search-div" style="margin: 10px 10px 40px">
            <!-- 查询条件区域 -->
            <div class="search-content">
                <span>
                    <label>标题：</label>
                    <input type="text" name="rulesTitle"  class="span2" />
                    &nbsp;<i class="boot_icon-question-sign" selectLike="tooltip"></i>
                </span>
                <span>
                    <label>类型：</label>
                    <select name="rulesTypeid" style="width: 110px;">
                        <option value="">==请选择==</option>
                    </select>
                </span>
            </div>
            <!-- 功能区域 -->
            <div class="search-toolbar" >
                <span style="float:left;">
                    <a class="easyui-linkbutton clearDgChecked"  icon="icon-redo"	plain="true"  title="清空所有勾选项" >清空勾选</a>
                    <a  class="easyui-linkbutton"  icon="icon-add"	plain="true" title="添加用户"  id="user_add" ><span>添加用户 </span></a>
                    <a class="easyui-linkbutton"  icon="icon-edit"	plain="true" title="修改用户"  id="user_update" ><span>修改用户</span></a>
                    <a class="easyui-linkbutton"  icon="icon-remove"	plain="true" id="user_delete"><span>批量删除</span></a>
                </span>
                <span style="float:right">
                    <button class="btn btn-primary btn-small" type="submit">查询</button>&nbsp;
                    <button class="btn btn-small clear" type="button" >清空</button>&nbsp;
                </span>
            </div>
    </div>
    <!--1.表格-->
    <table id="dg_user"></table>

    <!--2.弹窗，当点击事件触发时显示-->
    <!--增加用户的弹窗-->
    <div id="user_add_dialog" style="padding: 20px;"></div>
    <!--删除用户的弹窗-->
    <div id="user_delete_dialog"></div>
    <!--修改用户的弹窗-->
    <div id="user_update_dialog"></div>
    <script>
        $(function () {
            //1.初始：页面加载时，jq创建表头，并且查询json文件数据，对应<table id="dg_user"></table>
            $('#dg_user').datagrid({
                url:'http://localhost:8080/user/userList',//ajax请求数据文件，后台写好接口返回的数据，目前用json文件模拟
                frozenColumns:[[
                    {
                        field:"id",
                        title : "勾选",
                        checkbox:true
                    }
                ]],
                columns:[[
                    {field:'userId',title:'用户ID',width:100},
                    {field:'username',title:'用户姓名',width:100},
                    {field:'sex',title:'用户性别',width:100},
                    {field:'wechatHead',title:'微信头像',width:100},
                    {field:'userAudit',title:'用户审核',width:100},
                    {field:'province',title:'用户省份',width:100},
                    {field:'city',title:'用户城市',width:100},
                    {field:'regtime',title:'用户注册时间',width:100},
                    {field:'updtime',title:'用户更新时间',width:100,align:'right'},
                ]]
            });

            //2.点击事件：增加数据，点击增加按钮时
            $("#user_add").on("click",function () {
                //1.jq创建一个弹窗,对应<div id="user_add_dialog"></div>，id选择器关联
                $('#user_add_dialog').dialog({
                    title: '增加用户',
                    width: 600,
                    height: 400,
                    closed: false,
                    cache: false,
                    href: 'page/user/user_add.html',//2.弹窗的页面
                    modal: true
                });
            });


            //3.点击事件：删除数据，点击删除按钮时
            $("#user_delete").on("click",function () {//绑定删除时间
                // alert("进来");
                //1.判断是否选中。获取数据表格对象，名字叫做 dg_user
                // getSelections选中所有的行，如果没有选中的话，返回"[]"   注意判断方式
                // getSelected选中第一个选中的行，如果没有选中的话，返回null
                var row = $('#dg_user').datagrid('getSelections');//返回一个数组

                console.log(row);
               /* if (row == null){ //单行判断是否选中
                    // alert("请选择你需要删除的数据！");
                    $.messager.alert('提示信息','请选择你需要删除的数据');
                }*/
               if (row == ""){//多行选中判断
                   $.messager.alert('提示信息','请选择你需要删除的数据');
                   return;
               }
                //2.获取选中的数据id，选中的是返回一个数组
                //row[0]、row[1]、row[2]、row[3] ......
                var arrayList = [];
                for (let i = 0; i < row.length; i++) {
                    // console.log(row[i]);//输出每一个数组对象
                    // console.log(typeof row[i]);//object对象
                    //取出object对象里的userId
                    arrayList.push(row[i].userId);//将获得的id存放在数组里
                    // console.log( row[i].userId)
                }
                console.log("====>"+arrayList); //得的数组里id
                console.log(typeof arrayList);

                $.messager.confirm('确认','您确认想要删除第'+arrayList+'记录吗？',function(r){
                    if (r){
                        //将id传送到后台，删除了之后返回数据
                        $.ajax({
                            url:'http://localhost:8080/ids?ids='+arrayList,
                            type:"get",
                            success:function(data){
                                console.log(data);
                                console.log(typeof data);
                                //返回200，那么装逼成功
                                if (data == 200){
                                    //删除成功，那么刷新列表数据
                                    $.messager.alert('提示信息','删除成功');

                                    //刷新数据表格，获取datagrid表格
                                    $('#dg_user').datagrid('reload');    // 重新载入当前页面数据
                                }else {
                                    $.messager.alert('提示信息','删除失败');
                                }
                            }
                        })
                    }
                });
            });
            //4.点击事件：修改数据，点击修改按钮时
            $("#user_update").on("click",function () {
                $('#user_update_dialog').dialog({
                    title: '修改用户',
                    width: 600,
                    height: 400,
                    closed: false,
                    cache: false,
                    href: 'page/user/user_update.html',//2.弹窗的页面
                    modal: true
                });
            })
        });
    </script>
</body>

</html>